<template>
  <view class="pingjia">
    <view class="flex-row u-p-24">
      <view class="filter tags">
        <view class="tag on">全部</view>
        <view class="tag">好评132</view>
        <view class="tag">差评32</view>
        <view class="tag">带图16</view>
      </view>
    </view>

    <view class="bg-white u-p-24">
      <view class="pj" v-for="i in 4" :key="i">
        <view class="flex-row align-center">
          <u-avatar src="https://picsum.photos/id/564/200/200" bg-color="#B6B4B4" size="50"></u-avatar>
          <view class="name u-p-l-16 u-p-r-16 u-line-1" style="width: 500rpx;">123*****913</view>
          <view class="u-font-24" style="color: #C9C9C9;">2019-10-24</view>
        </view>
        <view style="padding: 16rpx 0 16rpx 64rpx;">
          <view class="u-font-26" style="color: #666;">时间佛塑的发送时间佛塑的发送时间佛塑的发送时间佛塑的发送时间佛塑的发送时间佛塑的发送打发士大夫</view>
          <view class="pics" @click="previewImg(src, urls)">
            <image class="pic" src="https://picsum.photos/id/563/200/200" mode="aspectFill"></image>
            <image class="pic" src="https://picsum.photos/id/563/200/200" mode="aspectFill"></image>
            <image class="pic" src="https://picsum.photos/id/563/200/200" mode="aspectFill"></image>
          </view>
          <view class="tags">
            <u-tag class="tag" text="面包" color="#AAAAAA" border-color="#AAAAAA" size="mini" mode="plain"></u-tag>
            <u-tag class="tag" text="面包" color="#AAAAAA" border-color="#AAAAAA" size="mini" mode="plain"></u-tag>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://picsum.photos/id/563/200/200',
        urls: [
          'https://picsum.photos/id/563/200/200',
          'https://picsum.photos/id/563/200/200',
          'https://picsum.photos/id/563/200/200'
        ]
      };
    },
    methods: {
      previewImg(src, urls) {
        uni.previewImage({
          current: src,
          urls: urls
        })
      }
    }
  }
</script>

<style lang="scss">
  .pingjia {
    .filter.tags {
      display: flex;
      flex-flow: row wrap;
      
      .tag {
        margin-right: 8rpx;
        margin-bottom: 8rpx;
        background: #FFF3E1;
        border-radius: 4rpx;
        padding: 8rpx 16rpx;
        font-size: 20rpx;
        color: #FFB94B;
        
        &.on {
          background: #FFB849;
          color: #fff;
        }
      }
    }
    
    .pj {
      padding: 16rpx 0;

      .tag {
        margin-bottom: 8rpx;
        margin-right: 16rpx;
      }
    }

    .name {
      color: #333;
      font-size: 30rpx;
    }

    .pics {
      padding: 16rpx 0;
      display: flex;
    }

    .pic {
      width: 120rpx;
      height: 120rpx;
      background: #E9E9E9;
      border-radius: 8rpx;
      margin-right: 16rpx;
    }
  }
</style>
